<template>
	<view class="content">

		<view>
			
			<view class="created">
				<view class="user_name">
					<view class="">创建人： </view>
					<view class="">{{show_data.user_name}}</view>
				</view>
				<view class="created_at">
					<view class="">创建时间： </view>
					<view class="">{{show_data.created_at}}</view>
				</view>
			</view>

			<view class="tou">
				<view class="wenti">反馈类型</view>
				<view class="xuanxiang">
					<view v-for="(item, idx) in tags" class="item">
						<view :class="show_data.title == item.text ? 'feedbackYes' : 'feedbackNo'">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>

			<view class="zhong">
				<view class="wenti">问题</view>
				<view class="shuruk yijian">{{show_data.content}}</view>

				<view class="gui-margin-top" style="width: 100%; padding-left: 20rpx;" v-if="show_data.imgs.length > 0">
					<text class="gui-h4">图片</text>
					<view style="display: flex; flex-wrap: wrap;">
						<view class="" v-for="(item, index) in show_data.imgs.split(',')"
							style="width: 141rpx; height: 100rpx; border-radius: 20rpx; margin: 20rpx 11rpx;"
							:key="index">
							<image @tap="show_img(item)" style="width: 100%; height: 100%;" :src="item" mode="">
							</image>
						</view>
					</view>

				</view>
			</view>

			<view class="reply">
				<view class="wenti">回复</view>
				<view class="shuruk yijian">{{show_data.status == '2' ? show_data.process[show_data.process.length-1].approver_reply : ""}}</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				feedback_index: 0,
				feedback_text: '',
				type_index: 0,
				tags: [{
						id: 0,
						text: "程序bug",
					},
					{
						id: 1,
						text: "功能建议",
					},
					{
						id: 2,
						text: "内容建议",
					},
					{
						id: 3,
						text: "网络问题",
					},
					{
						id: 4,
						text: "其他",
					}
				],
				imgs: [],
				show_data: [],
				id: null,
				token: uni.getStorageSync("formerToken"),
			}
		},
		onLoad(opt) {
			this.id = opt.id
			console.log('id: ', this.id);
			this.get_list(this.id);
		},
		methods: {
			show_loading() {
				uni.showLoading({
					title: '请稍候...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
			get_list(id) {
				let self = this
				// console.log('id: ', id);
				self.show_loading();
				self.$boya.Request({
					url: '/mailbox/get_detail',
					data: {
						tp: 'feedback',
						id: id,
						token: self.token
					}
				}, function(res) {
					self.hide_loading();
					// console.log('data: ', res.data);
					self.show_data = res.data;
					console.log('self.show_data: ', res.data.process.length);
				}, false)
			},
			show_img(url) {
				uni.previewImage({
					urls: [url],
					index: 0
				});
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url("https://boyaltd.oss-cn-hangzhou.aliyuncs.com/bj_liand.png") 100% 100% / 100% 100%;
	}

	.wenti {
		font-size: 35rpx;
		margin-top: 15rpx;
		margin-left: 18rpx;
	}
	
	.created {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}
	
	.created>view {
		display: flex;
		align-items: center;
	}
	
	.user_name,
	.created_at{
		padding: 15rpx;
	}

	.tou {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.xuanxiang {
		display: flex;
		flex-wrap: wrap;
		margin-top: 15rpx;
		margin-bottom: 10rpx;
	}

	.item>view {
		padding: 16rpx 40rpx;
		margin: 20rpx 25rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
	}

	.feedbackYes {
		color: white;
		background: linear-gradient(to right, #F55661, #F06C35);
	}

	.feedbackNo {
		background-color: #F5F6F9;
	}

	.zhong {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.yijian {
		padding: 15rpx;
	}

	.xia {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.shoujih {
		height: 90rpx;
	}

	.shuruk {
		width: 91%;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		margin-left: 18rpx;
		padding-left: 20rpx;
		border-radius: 20rpx;
		background-color: #F5F6F9;
	}

	.tijiao {
		color: white;
		width: 80%;
		margin-top: 40rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #F06C35, #F55661);
	}

	.navBar {
		width: 93%;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 10rpx 8rpx 10rpx rgba(198, 200, 207, 0.8);
	}

	.typeYes {
		color: #E64340;
		font-weight: bold;
	}

	.typeName {
		font-size: 28rpx;
		margin-top: -10rpx;
	}

	.submit {
		margin-top: 20rpx;
	}

	.coreContent {
		width: 82%;
		height: 145rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2);
		line-height: 50rpx;
	}

	.feedback {
		width: 99%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.shenhezt {
		display: flex;
		align-items: center;
		color: #8B8B8B;
		float: right;
	}

	.panduan {
		display: flex;
		align-items: center;
	}

	.tubiao {
		width: 35rpx;
		height: 35rpx;
	}

	.underline {
		margin-left: 10rpx;
		border-bottom: 1px solid #8B8B8B;
	}

	.reply {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}
</style>